<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>QSKJ_LOCAL</title>
    <script src="/Public/Build/Cesium/Cesium.js"></script>
    <script src="/Public/js/ellipsoidTrailMaterialProperty.js"></script>
    <script src="/Public/js/utilsForCesium.js"></script>
    <script src="/Public/js/getDataApi.js"></script>

    <script src="/Public/js/jquery-3.7.1.min.js"></script>
    <link rel="stylesheet" href="/Public/Build/Cesium/Widgets/widgets.css">
</head>

<body>
    <div id="cesiumContainer"></div>
    <script type="module">
        Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MjczNDgzMy1hYzE1LTRjNWYtODZhMS01MjZkNWRiMDc2MmUiLCJpZCI6ODIxMzAsImlhdCI6MTY0NDU0ODc0M30.LpGXXWsbQXucV5MTeC2g8BCAQWiZp612gosWcK-7ocE"
        const viewer = new Cesium.Viewer("cesiumContainer", {
            terrain: Cesium.Terrain.fromWorldTerrain(),
            skyAtmosphere: false,
        });
        //注册点击primitive事件
        regClickPrimitive(viewer);
        //根据区县id设置蒙版
        getCountyJSON().then(function (data) {
            let arr = []
            data.features[0].geometry.coordinates[0][0].forEach(item => {
                arr.push([item[0], item[1]])
            });
            var cenCN = data.features[0].properties.center

            const polygons = [
                new Cesium.ClippingPolygon({
                    positions: Cesium.Cartesian3.fromDegreesArray(arr.flat(2)),
                }),
            ]
            viewer.scene.globe.clippingPolygons = new Cesium.ClippingPolygonCollection({
                polygons,
            })
            viewer.scene.globe.clippingPolygons.inverse = true
            viewer.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(
                    cenCN[0],
                    cenCN[1] - 0.7,
                    30000
                ),
                orientation: {
                    heading: Cesium.Math.toRadians(0.0),
                    pitch: Cesium.Math.toRadians(-20),
                    roll: 0.0
                },
            })
        })
        //设置河流
        getRiverData().then(function (data) {
            const material = new Cesium.Material({
                fabric: {
                    uniforms: {
                        color: Cesium.Color.fromCssColorString("#7ffeff"),
                        image: "/Public/imgs/spriteline.png",
                        speed: 2,
                    },
                    source: shaderSourceRiver,
                },
                translucent: function () {
                    return true;
                },
            });
            // 材质着色的外观
            const appearance = new Cesium.PolylineMaterialAppearance();
            appearance.material = material;

            data.features.forEach(feature => {
                const pls = feature.geometry.paths[0]
                var pts = []
                pls.forEach(pl => {
                    pts.push(pl[0])
                    pts.push(pl[1])
                })
                var rivLevel = feature.attributes.level;
                var rivName = feature.attributes.name;
                const instance = new Cesium.GeometryInstance({
                    geometry: new Cesium.GroundPolylineGeometry({
                        positions: Cesium.Cartesian3.fromDegreesArray(pts),
                        width: setRiverWidth(rivLevel)
                    }),
                    id: rivName
                });
                //添加河流primitive
                viewer.scene.groundPrimitives.add(new Cesium.GroundPolylinePrimitive({
                    geometryInstances: instance,
                    appearance,
                }));
                //在河流的中心点处添加label
                var riv_label_jd = calMidPointOnPolyline(pls, null, calculatePolylineLength(pls))[0]
                var riv_label_wd = calMidPointOnPolyline(pls, null, calculatePolylineLength(pls))[1]

                viewer.entities.add({
                    position: Cesium.Cartesian3.fromDegrees(riv_label_jd, riv_label_wd),
                    label: {
                        text: rivName,
                        font: "16px sans-serif",
                        showBackground: true,
                        backgroundColor: new Cesium.Color.fromBytes(0, 70, 24),
                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                        eyeOffset: new Cesium.Cartesian3(0, 0, -2000)
                    },
                    billboard: {
                        image: setRiverBillboardImgUrl(rivLevel),
                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                        eyeOffset: new Cesium.Cartesian3(0, 0, -2000),
                        pixelOffset: new Cesium.Cartesian2(0, -30),
                        scale: 0.12
                    },
                });
            })
        })
        //设置污染源
        getPolutionSource().then(function (data) {
            data.poi_list.forEach(poi => {
                viewer.entities.add({
                    position: Cesium.Cartesian3.fromDegrees(poi.longitude, poi.latitude),
                    label: {
                        text: poi.name,
                        font: "16px sans-serif",
                        showBackground: true,
                        backgroundColor: new Cesium.Color.fromBytes(0, 70, 24),
                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                        eyeOffset: new Cesium.Cartesian3(0, 0, -2000),
                        // pixelOffset: new Cesium.Cartesian2(0, -23),
                    },
                    billboard: {
                        image: setPolutionSourceBillboardImgUrl(poi.type),
                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                        eyeOffset: new Cesium.Cartesian3(0, 0, -2000),
                        pixelOffset: new Cesium.Cartesian2(0, -30),
                        scale: 0.12
                    },
                });

                const mInstance = new Cesium.GeometryInstance({
                    geometry: new Cesium.CircleGeometry({
                        center: Cesium.Cartesian3.fromDegrees(poi.longitude, poi.latitude),
                        radius: 2000.0,
                    })
                });
                viewer.scene.primitives.add(new Cesium.GroundPrimitive({
                    geometryInstances: mInstance,
                    appearance: new Cesium.MaterialAppearance({
                        material: new Cesium.Material({
                            translucent: false,
                            fabric: {
                                type: 'test',
                                uniforms: {
                                    color: setPolutionSourceRingColor(poi.type),
                                },
                                source: shaderSourceGasStation
                            }
                        })
                    }),
                }));
            })
        })
        //设置湖泊
        getLakeData().then(function (data) {
            data.features.forEach(feature => {
                // console.log(feature.attributes.name)
                const pls = feature.geometry.rings[0]

                var pts = []
                pls.forEach(pl => {
                    pts.push(pl[0])
                    pts.push(pl[1])
                })

                const polygon = new Cesium.PolygonGeometry({
                    polygonHierarchy: new Cesium.PolygonHierarchy(
                        Cesium.Cartesian3.fromDegreesArray(pts)
                    ),
                });
                const mInstance = new Cesium.GeometryInstance({
                    geometry: polygon,
                    id: 'polygon',
                });

                viewer.scene.primitives.add(new Cesium.GroundPrimitive({
                    geometryInstances: mInstance,
                    appearance: new Cesium.EllipsoidSurfaceAppearance({
                        material: new Cesium.Material({
                            fabric: {
                                type: "Water",
                                uniforms: {
                                    baseWaterColor: new Cesium.Color(64 / 255.0, 157 / 255.0, 253 / 255.0, 0.5),
                                    normalMap: '/Public/imgs/waterNormals.jpg',
                                    frequency: 1000.0,
                                    animationSpeed: 0.005,
                                    amplitude: 10,
                                    specularIntensity: 10
                                }
                            }
                        })
                    }),
                }));
                var pyPositions = polygon._polygonHierarchy.positions;
                var cnDD = Cesium.BoundingSphere.fromPoints(pyPositions).center;
                var cnWGS_Radius = Cesium.Cartographic.fromCartesian(cnDD);
                var cnWGS_Degress_longitude = Cesium.Math.toDegrees(cnWGS_Radius.longitude);
                var cnWGS_Degress_latitude = Cesium.Math.toDegrees(cnWGS_Radius.latitude)

                viewer.entities.add({
                    position: Cesium.Cartesian3.fromDegrees(cnWGS_Degress_longitude, cnWGS_Degress_latitude),
                    label: {
                        text: feature.attributes.name,
                        font: "16px sans-serif",
                        showBackground: true,
                        backgroundColor: new Cesium.Color.fromBytes(0, 70, 24),
                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                        eyeOffset: new Cesium.Cartesian3(0, 0, -2000)
                    },
                      billboard: {
                        image: "/Public/imgs/lake-bib.png",
                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                        eyeOffset: new Cesium.Cartesian3(0, 0, -2000),
                        pixelOffset: new Cesium.Cartesian2(0, -30),
                        scale: 0.12
                    },
                });

            })
        })
    </script>
    </div>
</body>

</html>